<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header">
            <span>总销售额</span>
          </div>
          <div class="text item">¥{{ totalSales }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header">
            <span>总成交单数</span>
          </div>
          <div class="text item">{{ totalNumber }}单</div>
        </el-card>
      </el-col>
      <!-- 总销售额 -->
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header">
            <span>今日销售额</span>
          </div>
          <div class="text item">¥{{ todaySales }}</div>
        </el-card>
      </el-col>
      <!-- 总销售件数 -->
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header">
            <span>今日成交单数</span>
          </div>
          <div class="text item">{{ todayNumber }}单</div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 盈利趋势图 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header">
            <span>销售趋势</span>
          </div>
          <div ref="profitTrendChart" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts';

export default {
  data() {
    return {
      totalSales: 0,
      totalNumber: 0,
      todaySales: 0,
      todayNumber: 0,
      profitTrendData: [],
    };
  },
  mounted() {
    this.fetchData();
    this.initProfitTrendChart();
  },
  methods: {
    fetchData() {
      axios.get(process.env.VUE_APP_BASE_API + '/order/order/test')
        .then(response => {
          const data = response.data;
          this.totalSales = data.totalSales;
          this.totalNumber = data.totalNumber;
          this.todaySales = data.todaySales;
          this.todayNumber = data.todayNumber;
          this.profitTrendData = data.profitTrendData;
          this.initProfitTrendChart(); // 确保数据加载后再初始化图表
        })
        .catch(error => {
          console.error("There was an error fetching the dashboard data:", error);
        });
    },
    initProfitTrendChart() {
      const chartDom = this.$refs.profitTrendChart;
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value',
        },
        series: [{
          data: this.profitTrendData,
          type: 'line', // 或者 'bar' 用于柱状图
          smooth: true, // 如果想要曲线平滑可以设置为true
          itemStyle: {
            color: '#5470C6' // 曲线或柱状图的颜色
          }
        }]
      };
      myChart.setOption(option);
    }
  }
}
</script>

<style scoped>
.text {
  font-size: 24px;
  text-align: center;
}
.chart {
  height: 400px; /* 调整图表的高度 */
}
</style>
